<template>
  <div class="m-copy-able flex ai-center" @click="handleCopy">
    <span class="m-copy-able__text">
      {{ showText || copyText }}
    </span>
    <CopyOutlined class="m-copy-able__icon" />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import { CopyOutlined } from "@ant-design/icons-vue";
import copy from "./copy-to-clipboard";

// import * as CSS from "csstype";
export default defineComponent({
  name: "MCopyAble",
  components: {
    CopyOutlined,
  },
  props: {
    showText: {
      type: String,
    },
    copyText: {
      type: String,
    },
  },
  emits: {
    copy: (flag: boolean) => true,
  },
  setup(props, { emit }) {
    const handleCopy = () => {
      const flag = copy(props.copyText || props.showText);
      emit("copy", flag);
    };

    return {
      handleCopy,
    };
  },
});
</script>
